<template>
  <close-layer
    :enable-drag="true"
    @close="$emit('close')"
    :style="getStyle">
    <div
      slot="layer-content"
      style="background-color: white;border: 1px solid #d5d5d5">
      <!--    <div style="float: right;margin-top: 12px;margin-right: 12px">-->
      <!--      <a-select default-value="1">-->
      <!--        <a-select-option value="1">柱状图</a-select-option>-->
      <!--        <a-select-option value="2">折线图</a-select-option>-->
      <!--        <a-select-option value="3">饼状图</a-select-option>-->
      <!--      </a-select>-->
      <!--    </div>-->
      <div>
        <div style="margin-left: 12px;margin-top: 20px">
          <span>节点统计</span>
        </div>
        <div
          id="node_chart"
          style="width: 100%;height: 170px;margin-top: 10px;padding-left: 12px;padding-right: 12px"></div>
        <div style="margin-left: 12px;margin-top: 25px">
          <span>关系统计</span>
        </div>
        <div
          id="relation_chart"
          style="width: 100%;height: 170px;margin-top: 10px;padding-left: 12px;padding-right: 12px"></div>
      </div>
    </div>
  </close-layer>
</template>

<script>
import { Chart, Util } from '@antv/g2'
import { arrayGroupBy } from '@/utils/util'
import CloseLayer from '@/components/CloseLayer/CloseLayer'
import DataSet from '@antv/data-set'

export default {
  name: 'GraphChart',
  components: { CloseLayer },
  props: {
    category: {
      type: Array,
      default: () => []
    },
    nodes: {
      type: Array,
      default: () => []
    },
    edges: {
      type: Array,
      default: () => []
    },
    x: {
      type: Number,
      default: 0
    },
    y: {
      type: Number,
      default: 0
    }
  },
  methods: {
    getChartSize(container) {
      const nodeContainer = document.getElementById(container)
      return {
        width: nodeContainer.clientWidth,
        height: nodeContainer.clientHeight
      }
    },
    renderNodeChart() {
      const containerId = 'node_chart'
      const size = this.getChartSize(containerId)
      const chart = new Chart({
        container: 'node_chart',
        autoFit: true,
        height: size.height,
        width: size.width
      })
      chart.data(this.nodeChartData)
      chart.scale('count', {
        tickInterval: 20,
        type: 'linear',
        nice: true
      })
      chart.tooltip({
        showTitle: false,
        itemTpl: '<div style="text-align: center"><div><span>{name}</span></div><div style="margin: 5px" ><span>{count}</span></div></div></div>'
      })
      chart.interaction('active-region')
      chart.interval().position('name*count').tooltip('name*count', (name, count) => {
        return {
          name: name,
          count: count
        }
      })
      chart.render()
    },

    drawEdgePieChart() {
      const containerId = 'relation_chart'
      const size = this.getChartSize(containerId)
      const edgeChart = new Chart({
        container: 'relation_chart',
        autoFit: true,
        height: size.height,
        width: size.width
      })
      this.edgeChart = edgeChart
      edgeChart.data(this.edgeChartDate)
      edgeChart.coordinate('theta', {
        radius: 0.75
      })
      edgeChart
        .interval()
        .adjust('stack')
        .position('count')
        .color('count', ['#063d8a', '#1770d6', '#47abfc', '#38c060'])
        .style({ opacity: 0.4 })
        .state({
          active: {
            style: (element) => {
              const shape = element.shape
              return {
                matrix: Util.zoom(shape, 1.1)
              }
            }
          }
        })
        .label('name', (val) => {
          return {
            offset: -30,
            style: {
              opacity: 1,
              fill: 'white',
              fontSize: 12,
              shadowBlur: 2,
              shadowColor: 'rgba(0, 0, 0, .45)'
            },
            content: (obj) => {
              return obj.name + '\n' + obj.count
            }
          }
        })

      edgeChart.interaction('element-single-selected')
      edgeChart.render()
    },
    drawEdgeLineChart() {
      const containerId = 'relation_chart'
      const size = this.getChartSize(containerId)
      const edgeChart = new Chart({
        container: 'relation_chart',
        autoFit: true,
        height: size.height,
        width: size.width
      })
      this.edgeChart = edgeChart
      edgeChart.scale({
        Deaths: {
          sync: true,
          nice: true
        },
        death: {
          sync: true,
          nice: true
        }
      })
      const dsView = new DataSet().createView().source(this.edgeChartDate)
      const view = edgeChart.createView()
      view.data(dsView.rows)
      view.axis('name', {
        subTickLine: {
          count: 3,
          length: 3
        },
        tickLine: {
          length: 6
        }
      })

      edgeChart.tooltip({
        showTitle: false,
        itemTpl: '<div style="text-align: center"><div><span>{name}</span></div><div style="margin: 5px" ><span>{count}</span></div></div></div>'
      })
      view.axis('count')
      view.line().position('name*count')
      edgeChart.render()
    },
    renderEdgeChart() {
      const containerId = 'relation_chart'
      const size = this.getChartSize(containerId)
      const edgeChart = new Chart({
        container: 'relation_chart',
        autoFit: true,
        height: size.height,
        width: size.width
      })
      this.edgeChart = edgeChart
      edgeChart.scale('count', {
        tickInterval: 20,
        type: 'linear',
        nice: true
      })
      edgeChart.data(this.edgeChartDate)
      edgeChart.tooltip({
        showTitle: false,
        itemTpl: '<div style="text-align: center"><div><span>{name}</span></div><div style="margin: 5px" ><span>{count}</span></div></div></div>'
      })
      edgeChart.interaction('active-region')
      edgeChart.interval().position('name*count').tooltip('name*count', (name, count) => {
        return {
          name: name,
          count: count
        }
      })
      edgeChart.render()
    },
    createNodeRenderData() {
      const nodeGraphData = []
      const nodeGroups = arrayGroupBy(this.nodes, (it) => {
          const tempId = it.id
          return tempId.substring(0, tempId.indexOf('/'))
        }
      )
      Object.keys(nodeGroups).forEach((item) => {
        const keys = item.substring(Math.min(item.length, 1), item.length - 1)
        const categoryItem = this.category.find((it) => {
          return keys === it['key']
        })
        const values = nodeGroups[item] || []
        nodeGraphData.push({
          'id': keys,
          'name': categoryItem ? categoryItem.name : keys,
          'count': values.length
        })
      })
      this.nodeChartData = nodeGraphData
    },
    createEdgeRenderData() {
      const edgeGroups = arrayGroupBy(this.edges, (it) => {
          const tempId = it.id
          return tempId.substring(0, tempId.indexOf('/'))
        }
      )
      const edgeGraphData = []
      Object.keys(edgeGroups).forEach((item) => {
        const keys = item.substring(Math.min(item.length, 1), item.length - 1)
        const edgeItem = this.edges.find((it) => {
          let tempId = it['id']
          tempId = tempId.substring(0, tempId.indexOf('/'))
          return keys === tempId
        })
        const values = edgeGroups[item] || []
        edgeGraphData.push({
          'name': edgeItem ? edgeItem.edgeLabel : item,
          'count': values.length
        })
      })
      this.edgeChartDate = edgeGraphData
    }
  },

  beforeDestroy() {
    this.nodeChartData = undefined
    this.edgeChartDate = undefined
    if (this.nodeChart) {
      this.nodeChart.destroy()
      this.nodeChart = undefined
    }
    if (this.edgeChart) {
      this.edgeChart.destroy()
      this.edgeChart = undefined
    }
  },
  data() {
    return {
      nodeChart: undefined,
      edgeChart: undefined,
      nodeChartData: undefined,
      edgeChartDate: undefined,
      getStyle: {
        'position': 'absolute',
        'top': this.y + 'px',
        'left': this.x + 'px',
        'width': '600px',
        'z-index': 3000
      }
    }
  },

  mounted() {
    this.$nextTick(() => {
      this.createNodeRenderData()
      this.renderNodeChart()

      this.createEdgeRenderData()
      // this.drawEdgeLineChart()
      this.renderEdgeChart()
    })
  }
}
</script>

<style scoped>

</style>
